<!--
  操作按钮组件
  用于各种操作场景的按钮，支持图标和不同类型
  
  使用示例：
  - 基础按钮：<app-action-btn text="确认" />
  - 主要按钮：<app-action-btn text="提交" type="primary" />
  - 带图标：<app-action-btn text="筛选" icon="🔍" type="primary" />
  
  Props:
  - text: 按钮文字
  - type: 按钮类型 ('primary' | 'default')
  - icon: 图标（可选）
  
  Events:
  - click: 点击事件
-->
<script setup lang="ts">
interface IProps {
  text: string;
  type?: 'primary' | 'main' | 'default';
  icon?: string;
  arrow?: boolean;
}

withDefaults(defineProps<IProps>(), {
  type: 'default',
  arrow: false,
  icon: '',
});

defineEmits(['click']);
</script>

<template>
  <view
    :class="[
      'h-76 line-height-10 rounded-10 text-center text-14 flex items-center justify-center border-2 border-solid',
      type === 'default'
        ? 'bg-white color-black-3 border-gray-8'
        : type === 'main'
          ? 'bg-white color-main-3 border-gray-8'
          : 'bg-main-3 color-white border-main-3',
    ]"
    @click="$emit('click')"
  >
    <app-icon v-if="icon" class="mr-2 flex items-center" :name="icon" size="28" multi />
    <view class="flex items-center">{{ text }}</view>
    <up-icon v-if="arrow" name="arrow-up" color="#191919" class="ml-2" size="32rpx"></up-icon>
  </view>
</template>
